{% load static %}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>服务器详情</title>
    <!-- 引入 echarts.js -->
    <script src="{% static "js/echarts.min.js" %}"></script>
    <script src="{% static "js/dark.js" %}"></script>
    <script src="{% static "js/jquery.v1.10.2.js" %}"></script>
    <link rel="stylesheet" href="{% static "css/ns_tb.css" %}">

    <script type="text/javascript">
        $(function () {
            reloadServerInfo();
            reloadDiskInfo();
        });


        function reloadServerInfo() {
            $.ajax({
                url: "/getServerInfo?ip=" + "{{ serverIp }}",
                type: "get",
                dataType: "json",
                success: function (res) {
                    var myDate = new Date();
                    var mytime = myDate.toLocaleTimeString();
                    var html = '';
                    html += '<td>' + res['hostname'] + '</td>';
                    html += '<td>' + res['ip'] + '</td>';
                    html += '<td>' + res['cpu'] + '</td>';
                    html += '<td>' + res['mem'] + '</td>';
                    html += '<td>' + res['swap'] + '</td>';
                    html += '<td>' + res['osname'] + '</td>';
                    html += '<td>' + res['kernel'] + '</td>';
                    html += '<td>' + res['uptime'] + '</td>';
                    html += '<td>' + mytime + '</td>';

                    $("#serverInfo").html(html);
                }
            });

            setTimeout(function () {
                reloadServerInfo();
            }, 10000);
        }

        function reloadDiskInfo() {
            $.ajax({
                url: "/getDiskInfo?ip=" + "{{ serverIp }}",
                type: "get",
                dataType: "json",
                success: function (res) {
                }
            });

            setTimeout(function () {
                reloadDiskInfo();
            }, 10000);
        }
    </script>
</head>
<body bgcolor="#333">
<!-- body background:#0f0 bgcolor="FFFFCC" -->
<h2 align="center"><font color="FFFFFF">节点基础信息 -- 各个图表都可以使用鼠标拖动和滚轮缩放</font></h2>
<table border="2" align="center" class="imagetable">
    <tr>
        <th>主机名</th>
        <th>IP地址</th>
        <th>CPU</th>
        <th>内存(MB)</th>
        <th>SWAP(MB)</th>
        <th>操作系统</th>
        <th>内核版本</th>
        <th>运行时长</th>
        <th>当前时间</th>
    </tr>
    <tr id="serverInfo">

    </tr>
</table>

<table align="center">
    <h3 align="center"><font color="FFFFFF">节点磁盘存储信息统计</font></h3>
    <table border="2" align="center" class="imagetable">
        <tr>
            <th>序号</th>
            <th>文件系统</th>
            <th>总大小</th>
            <th>已用</th>
            <th>剩余</th>
            <th>使用率</th>
            <th>挂载点</th>
        </tr>
        <tr id="diskInfo">

        </tr>
    </table>
</table>

<br/><br/>

<!-- 为cpu-ECharts准备一个具备大小（宽高）的Dom -->
<div id="cpu" align="left" style="width: 1750px;height:220px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChartCpu = echarts.init(document.getElementById('cpu'), 'dark');
    // 指定图表的配置项和数据
    var cpuOption = {
        title: {
            text: '节点CPU使用率实时监控'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: ['USAGE(%)', 'USER(%)', 'NICE(%)', 'SYSTEM(%)', 'IOWAIT(%)']
        },
        toolbox: {
            show: true,
            feature: {
                magicType: {type: ['line', 'bar']},
                restore: {},
                saveAsImage: {}
            }
        },
        dataZoom: [
            {
                type: 'inside',
                start: 0,
                end: 100,
                startValue: [1,2,3,4]
            }
        ],
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                name: '时间',
                nameLocation: 'end',
                boundaryGap: false,
                nameGap: 40,
                data: [1,2,3,4]
            }
        ],
        yAxis: [
            {
                type: 'value',
                axisLabel: {
                    formatter: '{value} %'
                },
                name: 'CPU使用率(%)'
            }
        ],
        series: [
            {
                name: 'USAGE(%)',
                type: 'line',
                <!-- areaStyle: {normal: {}}, -->
                data: []
            },
            {
                name: 'NICE(%)',
                type: 'line',
                <!-- areaStyle: {normal: {}}, -->
                data: []
            },
            {
                name: 'USER(%)',
                type: 'line',
                <!-- areaStyle: {normal: {}}, -->
                data: []
            },
            {
                name: 'SYSTEM(%)',
                type: 'line',
                <!-- areaStyle: {normal: {}}, -->
                data: []
            },
            {
                name: 'IOWAIT(%)',
                type: 'line',
                <!-- areaStyle: {normal: {}}, -->
                data: []
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表
    myChartCpu.setOption(cpuOption);

    reloadCPUInfo();

    function reloadCPUInfo() {
        $.ajax({
            url: "/getCPUInfo?ip=" + "{{ serverIp }}" + "&" + "num=20",
            type: "get",
            dataType: "json",
            success: function (res) {
                if (res.length <= 0) {
                    myChartCpu.setOption(cpuOption);
                    return;
                }

                cpuOption.dataZoom[0].startValue = res['dateArr'];
                cpuOption.xAxis[0].data = res['dateArr'];
                cpuOption.series[0].data = res['usageArr'];
                cpuOption.series[1].data = res['userArr'];
                cpuOption.series[2].data = res['niceArr'];
                cpuOption.series[3].data = res['systemArr'];
                cpuOption.series[4].data = res['iowaitArr'];

                myChartCpu.setOption(cpuOption);
            }
        });

        setTimeout(function () {
            reloadCPUInfo();
        }, 10000);
    }
</script>

<br/>


<!-- 负载信息处理，时间坐标复用CPU -->


<!-- 为cpu-ECharts准备一个具备大小（宽高）的Dom -->
<div id="load" align="left" style="width: 1750px;height:220px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChartLoad = echarts.init(document.getElementById('load'), 'dark');
    // 指定图表的配置项和数据
    var loadOption = {
        title: {
            text: '节点平均负载值实时监控'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: ['平均负载值']
        },
        toolbox: {
            show: true,
            feature: {
                magicType: {type: ['line', 'bar']},
                restore: {},
                saveAsImage: {}
            }
        },
        dataZoom: [
            {
                type: 'inside',
                start: 0,
                end: 100,
                startValue: []
            }
        ],
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                name: '时间',
                nameLocation: 'end',
                boundaryGap: false,
                nameGap: 40,
                data: []
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '平均负载值'
            }
        ],
        series: [
            {
                name: '平均负载值',
                type: 'line',
                <!-- areaStyle: {normal: {}}, -->
                data: []
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChartLoad.setOption(loadOption);

    reloadLoadInfo();

    function reloadLoadInfo() {
        $.ajax({
            url: "/getLoadInfo?ip=" + "{{ serverIp }}" + "&" + "num=20",
            type: "get",
            dataType: "json",
            success: function (res) {
                if (res.length <= 0) {
                    myChartLoad.setOption(loadOption);
                    return;
                }

                cpuOption.dataZoom[0].startValue = res['dateArr'];
                cpuOption.xAxis[0].data = res['dateArr'];
                cpuOption.series[0].data = res['usageArr'];
                cpuOption.series[1].data = res['userArr'];
                cpuOption.series[2].data = res['niceArr'];
                cpuOption.series[3].data = res['systemArr'];
                cpuOption.series[4].data = res['iowaitArr'];

                myChartLoad.setOption(loadOption);
            }
        });

        setTimeout(function () {
            reloadLoadInfo();
        }, 10000);
    }
</script>

<br/>

<!-- 为MEM-ECharts准备一个具备大小（宽高）的Dom -->
<div id="mem" align="left" style="width: 1750px;height:220px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChartMem = echarts.init(document.getElementById('mem'), 'dark');
    // 指定图表的配置项和数据
    var memOption = {
        title: {
            text: '节点内存实时监控'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: ['已使用(MB)', '空闲(MB)', 'SWAP已使用(MB)', 'SWAP空闲(MB)']
        },
        toolbox: {
            show: true,
            feature: {
                magicType: {type: ['line', 'bar']},
                restore: {},
                saveAsImage: {}
            }
        },
        dataZoom: [
            {
                type: 'inside',
                start: 0,
                end: 100,
                startValue: []
            }
        ],
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                name: '时间',
                nameLocation: 'end',
                boundaryGap: false,
                nameGap: 40,
                data: []
            }
        ],
        yAxis: [
            {
                type: 'value',
                axisLabel: {
                    formatter: '{value} MB'
                },
                name: '内存(MB)'
            }
        ],
        series: [
            {
                name: '已使用(MB)',
                type: 'line',
                <!-- areaStyle: {normal: {}}, -->
                data: []
            },
            {
                name: '空闲(MB)',
                type: 'line',
                <!-- areaStyle: {normal: {}}, -->
                data: []
            },
            {
                name: 'SWAP已使用(MB)',
                type: 'line',
                <!-- areaStyle: {normal: {}}, -->
                data: []
            },
            {
                name: 'SWAP空闲(MB)',
                type: 'line',
                <!-- areaStyle: {normal: {}}, -->
                data: []
            },
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChartMem.setOption(memOption);

    reloadMemInfo();

    function reloadMemInfo() {
        $.ajax({
            url: "/getMemInfo?ip=" + "{{ serverIp }}" + "&" + "num=20",
            type: "get",
            dataType: "json",
            success: function (res) {
                if (res.length <= 0) {
                    myChartMem.setOption(memOption);
                    return;
                }

                memOption.dataZoom[0].startValue = res['dateArr'];
                memOption.xAxis[0].data = res['dateArr'];
                memOption.series[0].data = res['usageArr'];
                memOption.series[1].data = res['freeArr'];
                memOption.series[2].data = res['swapUsedArr'];
                memOption.series[3].data = res['swapFreeArr'];

                myChartMem.setOption(memOption);
            }
        });

        setTimeout(function () {
            reloadMemInfo();
        }, 10000);
    }
</script>

<br/>

<!-- 为diskio-ECharts准备一个具备大小（宽高）的Dom -->
<div id="diskio" align="left" style="width: 1750px;height:220px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChartDiskio = echarts.init(document.getElementById('diskio'), 'dark');
    // 指定图表的配置项和数据
    var diskOption = {
        title: {
            text: '节点磁盘IO实时监控'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: ['磁盘IO']
        },
        toolbox: {
            show: true,
            feature: {
                magicType: {type: ['line', 'bar']},
                restore: {},
                saveAsImage: {}
            }
        },
        dataZoom: [
            {
                type: 'inside',
                start: 0,
                end: 100,
                startValue: []
            }
        ],
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                name: '时间',
                nameLocation: 'end',
                boundaryGap: false,
                nameGap: 40,
                data: []
            }
        ],
        yAxis: [
            {
                type: 'value',
                axisLabel: {
                    formatter: '{value} ms'
                },
                name: '硬盘util (%)'
            }
        ],
        series: [
            {
                name: '磁盘IO',
                type: 'line',
                <!-- areaStyle: {normal: {}}, -->
                data: []
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChartDiskio.setOption(diskOption);
</script>

</body>
</html>